Villkorlig Typinferens: Bemästra 'infer'-nyckelordet i TypeScript

TypeScripts typsystem erbjuder kraftfulla verktyg för att skapa robust och underhållbar kod. Bland dessa verktyg utmärker sig villkorliga typer som en mångsidig mekanism för att uttrycka komplexa typrelationer. Nyckelordet infer låser upp avancerade möjligheter inom villkorliga typer, vilket möjliggör sofistikerad typ-extrahering och -manipulering. Denna omfattande guide kommer att utforska finesserna med infer och ge praktiska exempel och insikter för att hjälpa dig att bemästra dess användning.

Förståelse för Villkorliga Typer

Innan vi dyker in i infer är det avgörande att förstå grunderna i villkorliga typer. Villkorliga typer låter dig definiera typer som beror på ett villkor, liknande en ternär operator i JavaScript. Syntaxen följer detta mönster:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Här, om typen T är tilldelningsbar till typen U, är den resulterande typen X; annars är den Y.

Exempel:

            type IsString<T> = T extends string ? true : false;

type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
            

              
                Copy
              
            
          

Detta enkla exempel visar hur villkorliga typer kan användas för att avgöra om en typ är en sträng eller inte. Detta koncept sträcker sig till mer komplexa scenarier och banar väg för nyckelordet infer.

Introduktion till 'infer'-nyckelordet

Nyckelordet infer används inom true-grenen av en villkorlig typ för att introducera en typvariabel som kan härledas (infereras) från typen som kontrolleras. Detta gör att du kan extrahera specifika delar av en typ och använda dem i den resulterande typen.

Syntax:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

I denna syntax är R en typvariabel som kommer att infereras från strukturen hos T. Om T matchar mönstret kommer R att innehålla den infererade typen, och den resulterande typen blir X; annars blir den Y.

Grundläggande Exempel på Användning av 'infer'

1. Inferera Returtyp för en Funktion

Ett vanligt användningsfall är att inferera returtypen för en funktion. Detta kan uppnås med följande villkorliga typ:

            type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
            

              
                Copy
              
            
          

Förklaring:

• T extends (...args: any) => any: Denna begränsning säkerställer att T är en funktion.
• (...args: any) => infer R: Detta mönster matchar en funktion och infererar returtypen som R.
• R : any: Om T inte är en funktion är den resulterande typen any.

Exempel:

            function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetingReturnType = ReturnType<typeof greet>; // type GreetingReturnType = string

function calculate(a: number, b: number): number {
  return a + b;
}

type CalculateReturnType = ReturnType<typeof calculate>; // type CalculateReturnType = number

            

              
                Copy
              
            
          

Detta exempel visar hur ReturnType framgångsrikt extraherar returtyperna från funktionerna greet och calculate.

2. Inferera Elementtyp i en Array

Ett annat vanligt användningsfall är att extrahera elementtypen i en array:

            type ElementType<T> = T extends (infer U)[] ? U : never;
            

              
                Copy
              
            
          

Förklaring:

• T extends (infer U)[]: Detta mönster matchar en array och infererar elementtypen som U.
• U : never: Om T inte är en array är den resulterande typen never.

Exempel:

            type StringArrayElement = ElementType<string[]>; // type StringArrayElement = string
type NumberArrayElement = ElementType<number[]>; // type NumberArrayElement = number
type MixedArrayElement = ElementType<(string | number)[]>; // type MixedArrayElement = string | number

type NotAnArray = ElementType<number>; // type NotAnArray = never
            

              
                Copy
              
            
          

Detta visar hur ElementType korrekt infererar elementtypen för olika array-typer.

Avancerad Användning av 'infer'

1. Inferera Parametrar för en Funktion

På samma sätt som man infererar returtypen kan man inferera parametrarna för en funktion med hjälp av infer och tupler:

            type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
            

              
                Copy
              
            
          

Förklaring:

• T extends (...args: any) => any: Denna begränsning säkerställer att T är en funktion.
• (...args: infer P) => any: Detta mönster matchar en funktion och infererar parametertyperna som en tupel P.
• P : never: Om T inte är en funktion är den resulterande typen never.

Exempel:

            function logMessage(message: string, level: 'info' | 'warn' | 'error'): void {
  console.log(`[${level.toUpperCase()}] ${message}`);
}

type LogMessageParams = Parameters<typeof logMessage>; // type LogMessageParams = [message: string, level: "info" | "warn" | "error"]

function processData(data: any[], callback: (item: any) => void): void {
  data.forEach(callback);
}

type ProcessDataParams = Parameters<typeof processData>; // type ProcessDataParams = [data: any[], callback: (item: any) => void]
            

              
                Copy
              
            
          

Parameters extraherar parametertyperna som en tupel, och bevarar ordningen och typerna för funktionens argument.

2. Extrahera Egenskaper från en Objekttyp

infer kan också användas för att extrahera specifika egenskaper från en objekttyp. Detta kräver en mer komplex villkorlig typ, men det möjliggör kraftfull typmanipulering.

            type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};
            

              
                Copy
              
            
          

Förklaring:

• K in keyof T: Detta itererar över alla nycklar i typen T.
• T[K] extends U ? K : never: Denna villkorliga typ kontrollerar om typen för egenskapen vid nyckel K (d.v.s. T[K]) är tilldelningsbar till typen U. Om den är det inkluderas nyckeln K i den resulterande typen; annars exkluderas den med hjälp av never.
• Hela konstruktionen skapar en ny objekttyp med endast de egenskaper vars typer ärver från U.

Exempel:

            interface Person {
  name: string;
  age: number;
  city: string;
  country: string;
}


type StringProperties = PickByType<Person, string>; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType<Person, number>; // type NumberProperties = { age: number; }

            

              
                Copy
              
            
          

PickByType låter dig skapa en ny typ som endast innehåller egenskaperna av en specifik typ från en befintlig typ.

3. Inferera Nästlade Typer

infer kan kedjas och nästlas för att extrahera typer från djupt nästlade strukturer. Tänk dig till exempel att extrahera typen av det innersta elementet i en nästlad array.

            type DeepArrayElement<T> = T extends (infer U)[] ? DeepArrayElement<U> : T;
            

              
                Copy
              
            
          

Förklaring:

• T extends (infer U)[]: Detta kontrollerar om T är en array och infererar elementtypen som U.
• DeepArrayElement<U>: Om T är en array anropar typen rekursivt DeepArrayElement med elementtypen U.
• T: Om T inte är en array returnerar typen T självt.

Exempel:

            type NestedStringArray = string[][][];
type DeepString = DeepArrayElement<NestedStringArray>; // type DeepString = string

type MixedNestedArray = (number | string)[][][][];
type DeepMixed = DeepArrayElement<MixedNestedArray>; // type DeepMixed = string | number

type RegularNumber = DeepArrayElement<number>; // type RegularNumber = number
            

              
                Copy
              
            
          

Detta rekursiva tillvägagångssätt gör att du kan extrahera typen av elementet på den djupaste nivån av nästling i en array.

Verkliga Tillämpningar

Nyckelordet infer finner tillämpningar i olika scenarier där dynamisk typmanipulering krävs. Här är några praktiska exempel:

1. Skapa en Typsäker Händelsehanterare (Event Emitter)

Du kan använda infer för att skapa en typsäker händelsehanterare som säkerställer att händelselyssnare tar emot rätt datatyp.

            type EventMap = {
  'data': { value: string };
  'error': { message: string };
};

type EventName<T extends EventMap> = keyof T;

type EventData<T extends EventMap, K extends EventName<T>> = T[K];

type EventHandler<T extends EventMap, K extends EventName<T>> = (data: EventData<T, K>) => void;

class EventEmitter<T extends EventMap> {
  private listeners: { [K in EventName<T>]?: EventHandler<T, K>[] } = {};

  on<K extends EventName<T>>(event: K, handler: EventHandler<T, K>): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(handler);
  }

  emit<K extends EventName<T>>(event: K, data: EventData<T, K>): void {
    this.listeners[event]?.forEach(handler => handler(data));
  }
}


const emitter = new EventEmitter<EventMap>();

emitter.on('data', (data) => {
  console.log(`Mottog data: ${data.value}`);
});

emitter.on('error', (error) => {
  console.error(`Ett fel inträffade: ${error.message}`);
});

emitter.emit('data', { value: 'Hej, världen!' });

emitter.emit('error', { message: 'Något gick fel.' });

            

              
                Copy
              
            
          

I detta exempel använder EventData villkorliga typer och infer för att extrahera datatypen som är associerad med ett specifikt händelsenamn, vilket säkerställer att händelselyssnare tar emot rätt typ av data.

2. Implementera en Typsäker Reducer

Du kan utnyttja infer för att skapa en typsäker reducer-funktion för tillståndshantering.

            type Action<T extends string, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer<S, A extends Action<string>> = (state: S, action: A) => S;

// Exempel-Actions
type IncrementAction = Action<'INCREMENT'>;
type DecrementAction = Action<'DECREMENT'>;
type SetValueAction = Action<'SET_VALUE', number>;


// Exempel-State
interface CounterState {
  value: number;
}

// Exempel-Reducer
const counterReducer: Reducer<CounterState, IncrementAction | DecrementAction | SetValueAction> = (
  state: CounterState,
  action: IncrementAction | DecrementAction | SetValueAction
): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'SET_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

// Användning
const initialState: CounterState = { value: 0 };
const newState1 = counterReducer(initialState, { type: 'INCREMENT' }); // newState1.value är 1
const newState2 = counterReducer(newState1, { type: 'SET_VALUE', payload: 10 }); // newState2.value är 10

            

              
                Copy
              
            
          

Även om detta exempel inte direkt använder `infer`, lägger det grunden för mer komplexa reducer-scenarier. `infer` kan tillämpas för att dynamiskt extrahera `payload`-typen från olika `Action`-typer, vilket möjliggör striktare typkontroll inom reducer-funktionen. Detta är särskilt användbart i större applikationer med många actions och komplexa tillståndsstrukturer.

3. Dynamisk Typgenerering från API-svar

När du arbetar med API:er kan du använda infer för att automatiskt generera TypeScript-typer från strukturen i API-svaren. Detta hjälper till att säkerställa typsäkerhet vid interaktion med externa datakällor.

Tänk dig ett förenklat scenario där du vill extrahera datatypen från ett generiskt API-svar:

            type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

type ExtractDataType<T> = T extends ApiResponse<infer U> ? U : never;

// Exempel på API-svar
type User = {
  id: number;
  name: string;
  email: string;
};

type UserApiResponse = ApiResponse<User>;

type ExtractedUser = ExtractDataType<UserApiResponse>; // type ExtractedUser = User

            

              
                Copy
              
            
          

ExtractDataType använder infer för att extrahera typen U från ApiResponse<U>, vilket ger ett typsäkert sätt att komma åt datastrukturen som returneras av API:et.

Bästa Praxis och Överväganden

• Tydlighet och Läsbarhet: Använd beskrivande namn på typvariabler (t.ex. ReturnType istället för bara R) för att förbättra kodens läsbarhet.
• Prestanda: Även om infer är kraftfullt kan överdriven användning påverka prestandan för typkontroll. Använd det med omdöme, särskilt i stora kodbaser.
• Felhantering: Tillhandahåll alltid en reservtyp (t.ex. any eller never) i false-grenen av en villkorlig typ för att hantera fall där typen inte matchar det förväntade mönstret.
• Komplexitet: Undvik alltför komplexa villkorliga typer med nästlade infer-uttryck, eftersom de kan bli svåra att förstå och underhålla. Refaktorera din kod till mindre, mer hanterbara typer vid behov.
• Testning: Testa dina villkorliga typer noggrant med olika indatatyper för att säkerställa att de beter sig som förväntat.

Globala Överväganden

När du använder TypeScript och infer i ett globalt sammanhang, tänk på följande:

• Lokalisering och Internationalisering (i18n): Typer kan behöva anpassas till olika språk och dataformat. Använd villkorliga typer och `infer` för att dynamiskt hantera varierande datastrukturer baserat på lokala krav. Till exempel kan datum och valutor representeras olika i olika länder.
• API-design för en Global Publik: Designa dina API:er med global tillgänglighet i åtanke. Använd konsekventa datastrukturer och format som är lätta att förstå och bearbeta oavsett användarens plats. Typdefinitioner bör återspegla denna konsekvens.
• Tidszoner: När du hanterar datum och tider, var medveten om skillnader i tidszoner. Använd lämpliga bibliotek (t.ex. Luxon, date-fns) för att hantera tidszonskonverteringar och säkerställa korrekt datarepresentation över olika regioner. Överväg att representera datum och tider i UTC-format i dina API-svar.
• Kulturella Skillnader: Var medveten om kulturella skillnader i datarepresentation och tolkning. Till exempel kan namn, adresser och telefonnummer ha olika format i olika länder. Se till att dina typdefinitioner kan hantera dessa variationer.
• Hantering av Valutor: När du hanterar monetära värden, använd en konsekvent valutarepresentation (t.ex. ISO 4217 valutakoder) och hantera valutakonverteringar på lämpligt sätt. Använd bibliotek utformade för valutahantering för att undvika precisionsproblem och säkerställa korrekta beräkningar.

Tänk dig till exempel ett scenario där du hämtar användarprofiler från olika regioner, och adressformatet varierar beroende på land. Du kan använda villkorliga typer och `infer` för att dynamiskt justera typdefinitionen baserat på användarens plats:

            type AddressFormat<CountryCode extends string> = CountryCode extends 'US'
    ? { street: string; city: string; state: string; zipCode: string; }
    : CountryCode extends 'CA'
    ? { street: string; city: string; province: string; postalCode: string; }
    : { addressLines: string[]; city: string; country: string; };

type UserProfile<CountryCode extends string> = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat<CountryCode>;
    countryCode: CountryCode; // Lägg till landskod i profilen
};

// Exempel på användning
type USUserProfile = UserProfile<'US'>; // Har amerikanskt adressformat
type CAUserProfile = UserProfile<'CA'>; // Har kanadensiskt adressformat
type GenericUserProfile = UserProfile<'DE'>; // Har generiskt (internationellt) adressformat

            

              
                Copy
              
            
          

Genom att inkludera `countryCode` i `UserProfile`-typen och använda villkorliga typer baserade på denna kod, kan du dynamiskt justera `address`-typen för att matcha det förväntade formatet för varje region. Detta möjliggör typsäker hantering av olika dataformat över olika länder.

Slutsats

Nyckelordet infer är ett kraftfullt tillägg till TypeScripts typsystem, som möjliggör sofistikerad typmanipulering och extrahering inom villkorliga typer. Genom att bemästra infer kan du skapa mer robust, typsäker och underhållbar kod. Från att inferera funktioners returtyper till att extrahera egenskaper från komplexa objekt är möjligheterna stora. Kom ihåg att använda infer med omdöme och prioritera tydlighet och läsbarhet för att säkerställa att din kod förblir förståelig och underhållbar på lång sikt.

Denna guide har gett en omfattande översikt över infer och dess tillämpningar. Experimentera med de givna exemplen, utforska ytterligare användningsfall och utnyttja infer för att förbättra ditt utvecklingsflöde i TypeScript.